<template>
  <div class="products">
    <input placeholder="搜索关键字" @keyup="keyChange" v-model="query.key" />
    <div class="sorts">
      <span @click="changeSorted(0)" :class="{sort:true,active:query.sorted == 0}">综合</span>
      <span @click="changeSorted(1)" :class="{sort:true,active:query.sorted == 1}">销量</span>
      <span v-if="query.sorted == 2" @click="changeSorted(3)" :class="{sort:true,active:query.sorted == 2}">价格↓</span>
      <span v-else @click="changeSorted(2)" :class="{sort:true,active:query.sorted == 3}">价格↑</span>
      
    </div>
    <div class="brands">
      <div :class="{brand:true,active:brand.selected}" @click="changeBrand(brand)" v-for="brand in brands" :key="brand._id">
        {{brand.name}}
      </div>
      <div><span @click="clear">清空</span><span @click="ok">确定</span></div>
    </div>
    <div>
      <div>总共{{total}}条数据</div>
      <div v-for="product in rows" @click="goProduct(product.productId)" :key="product._id">
        <img :src="product.productImg" />
        {{product.productName}}
      </div>
    </div>
  </div>
</template>

<script>


import api from '../api/index'
export default {
  name: 'products',
  components: {
    
  },
  data(){
    return {
      total:0,
      rows:[],
      brands:[],
      query:{
        key:'',
        brandIds:'',
        sorted:3,
        pageNum:1
      }
    }
  },
  methods:{
    goProduct(productId){
      console.log(productId)
      this.$router.push({
        path:'/product',
        query: { productId }
      })
    },
    keyChange(){
      this.getList()
    },
    changeSorted(sorted){
      this.query.sorted = sorted
      this.getList()
    },
    changeBrand(brand){
      brand.selected = !brand.selected
    },
    clear(){
      for(let i = 0; i < this.brands.length; i ++){
        this.brands[i].selected = false
      }
      this.query.brandIds = ''
      this.getList()
    },
    ok(){
      let brandIds = []
      for(let i = 0; i < this.brands.length; i ++){
        if(this.brands[i].selected) brandIds.push(this.brands[i]._id)
      }
      this.query.brandIds = brandIds.join(',')
      this.getList()
    },
    getList(){
      this.$http({
        url:'/products',
        params:this.query
      }).then(res => {
        if(res.errorMsg){
          this.total = 0
          this.rows = []
        }else{
          this.total = res.total
          for(let i = 0; i < res.rows.length; i ++){
            let imgs = res.rows[i].productImgs.split(',')
            res.rows[i].productImg = api.baseURL + imgs[0]
          }
          this.rows = res.rows
        }
      })
    },
    getBrands(){
      this.$http({
        url:'/brands'
      }).then(res => {
        for(let i = 0; i < res.length; i ++){
          res[i].selected = false
        }
        this.brands = res
      })
    }
  },
  created(){
    // console.log(query)
  },
  mounted(){
    let query = this.$route.query
    this.query.key = query.key || ''
    this.getList()
    this.getBrands()
  }
}
</script>

<style scoped>
  .products{
    font-size:36rem;
  }
  .sorts{
    display: flex;
  }
  .sort{
    flex:1;
  }
  .sort.active{
    color: #ff0000;
  }
  .brands{

  }
  .brand.active{
    color: #ff0000;
  }
</style>